<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1291028_cjvr092mv3i.css">
</head>
<body>
    <div class="top">
        <div class="top-nav">
            <div class="top-left">
                <a href="#">小米网</a>
                <p></p>
                <a href="#">MIUI</a>
                <p></p>
                <a href="#">米聊</a>
                <p></p>
                <a href="#">游戏</a>
                <p></p>
                <a href="#">多看阅读</a>
                <p></p>
                <a href="#">云服务</a>
                <p></p>
                <a href="#">小米网移动版</a>
                <p></p>
                <a href="#">Select region</a>
                <p></p>
                <a href="#">米粉节答疑</a>
            </div>
            <div class="top-right">
                <a href="#">注册</a>
                <p></p>
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <div class="search">
        <div class="search-left">
            <img src="images/logo.png" alt="">
        </div>
        <div class="search-center">
            <div class="ss">
                <input type="text" placeholder="搜索您需要的商品">
                <a href="#">小米手环</a>
                <a href="#">耳机音箱</a>
                <a href="#">保护壳</a>
            </div>
            <div class="fdj">
                <img src="images/fangdajing.png" alt="">
            </div>
        </div>
        <div class="search-right">
           <div class="time">
               <div class="nz">
                  <img src="images/clock.png" alt="">
               </div>
              <span>4月14日开放购买</span>
           </div>
           <div class="btn">
               <button><img src="images/shopcar.png" alt="">购物车</button>
           </div>
        </div>
    </div>
    <div class="container">
       <div class="container-left">
           <p>全部商品分类</p>
           <div class="row">
               <p><a href="#">购买手机</a></p>
               <span>小米Noto</span>
               <span>小米4</span>
               <span>红米</span>
               <span>红米Noto</span>
            </div>
           <div class="row">
               <p><a href="#">购买电视与平板</a></p>
               <span>小米电视</span>
               <span>小米盒子</span>
               <span>小米平板</span>
           </div>
           <div class="row">
               <p><a href="#">路由器与智能硬件</a></p>
               <span>路由器</span>
               <span>体重秤</span>
               <span>净化器与滤芯</span>
           </div>
           <div class="row">
               <p><a href="#">插线板、移动电源与电池</a></p>
               <span>小米移动电源</span>
               <span>电池</span>
               <span>充电器</span>
           </div>
           <div class="row">
               <p><a href="#">耳机音箱与存储卡</a></p>
               <span>小米头戴式耳机</span>
               <span>小米活塞耳机</span>
           </div>
           <div class="row">
               <p><a href="#">保护套与贴膜</a></p>
               <span>保护套/保护壳</span>
               <span>贴膜</span>
               <span>防尘塞</span>
           </div>
           <div class="row">
               <p><a href="#">后盖与个性化配件</a></p>
               <span>米键</span>
               <span>后盖</span>
               <span>贴纸</span>
               <span>手机支架</span>
           </div>
           <div class="row">
               <p><a href="#">小米生活方式</a></p>
               <span>服装</span>
               <span>米兔</span>
               <span>背包</span>
               <span>生活周边</span>
           </div>
       </div>
       <div class="container-right">
           <div class="nav">
            <a href="#">首页</a>
            <a href="#">小米手机</a>
            <a href="#">红米</a>
            <a href="#">小米平板</a>
            <a href="#">小米电视</a>
            <a href="#">盒子</a>
            <a href="#">路由器</a>
            <a href="#">合约机</a>
            <a href="#">服务</a> 
            <a href="#">社区</a> 
           </div>
           <div class="banner">
               <div class="slide">
                  <img src="images/banner1.png" alt="">
                  <img src="images/banner2.png" alt="">
                  <img src="images/banner3.png" alt="">
                  <img src="images/banner4.png" alt="">
                  <img src="images/banner5.png" alt="">
              </div>
              <div class="all-icons">
                  <span class="active">1</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                  <span>5</span>
              </div>
          </div>
          <div class="tp">
              <img src="images/01.png" alt="">
              <img src="images/02.png" alt="">
              <img src="images/03.png" alt="">
          </div>
       </div>
    </div>
    <div class="dp">
        <div class="dp-left">
            <span>小米明星单品</span>
           <span>根据机型选配件</span>
        </div>
        <div class="dp-right">
            <i class="location iconfont">&#xe600;</i>
            <i class="location iconfont">&#xe6ba;</i>
        </div>
    </div> 
    <div class="dp-nav">
        <div class="danpin">
           <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
           <p>小米智能插座</p>
           <p>让普通家电变得智能</p>
       </div>
       <div class="danpin">
          <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
          <p>小米空气净化器</p>
          <p>高性能智能空气净化器立即预约</p>
       </div>
       <div class="danpin">
          <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
          <p>小米活塞耳机简装版</p>
          <p>好声音源自活塞式音腔，延续经典设计</p>
       </div>
       <div class="danpin">
         <img src="images/aa.jpg" alt="">
         <p>小米路由器</p>
         <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
       </div>
    </div> 
    <div class="xp">
       <div class="xp-left">
           <p>新品上架</p>
       </div>
       <div class="xp-right">
        <a>更多></a>
       </div>
    </div>
    <div class="xp-nav">
        <div class="fhz">
          <img src="images/fanghezi0407xiao.jpg" alt="">
        </div>
        <div class="sh">
            <p>小米手环</p>
            <p>79元</p>
           <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
       </div>
       <div class="fenlei">
           <div class="tjsp">
               <a href="#">特价商品</a>
               <div class="nr">
                  <p>SanDisk32GB存储卡</p>
                  <span>79元</span>
                  <span><s>109元</s></span>
                  <p>还有更多特价商品</p>
               </div>
               <div class="cck">
                  <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                </div>
           </div>
           <div class="tc">
               <div class="text">
                   <p>特惠配件套餐</p>
                   <p>手机必备配件组合购买</p>
                   <p>实惠更优惠</p>
              </div>
               <img src="images/channel-list-cool.jpg" alt="">
           </div>
           <div class="kw">
               <div class="text">
                  <p>我爱酷玩</p>
                  <p>邂逅炫酷的电子产品</p>
                  <p>结交趣味相投的朋友</p>
               </div>
               <img src="images/channel-list-new.jpg" alt="">
           </div>

       </div>
       <div class="xp-center">
           <div class="center1">
               <div class="center1-top">
                    <div class="left">
                      <p>5周年米兔钥匙扣</p>
                      <p>9.9元</p>
                    </div>
                   <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
               </div>
               <div class="center1-foot">
                    <div class="left1">
                      <p> QCY派Q8蓝牙耳机</p>
                      <p>59.9元</p>
                    </div>
                   <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                </div>
           </div>
           <div class="center2">
             <p>小米T恤路标MILOGO</p>
             <p>39元</p>
             <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
           </div>
           <div class="center3">
              <p>小米4实木后盖</p>
              <p>69元</p>
              <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
           </div>
       </div>
       <div class="xp-bottom">
           <div class="bottom1">
               <p>小米Note超薄保护壳</p>
               <p>49元</p>
               <img src="images/baohuke.png" alt="">
           </div>
           <div class="bottom2">
               <p>小米自拍杆</p>
               <p>49元</p>
               <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
          </div>
          <div class="bottom3">
              <p>先锋CL31系列耳式耳机</p>
              <p>99元</p>
              <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
          </div>
       </div>
       <div class="right">
           <div class="link">
               <div class="menu">
                  <a href="#">企业用户采购通道</a>
                  <a href="#">></a>
                  <hr class="line">
              </div>
              <div class="menus">
                  <a href="#">小米手机防伪查询</a>
                  <a href="#">></a>
                  <hr class="line">
              </div>
              <div  class="menus">
                  <a href="#">小米手机官翻版</a>
                  <a href="#">></a>
                  <hr class="line">
              </div>
              <div  class="menus">
                  <a href="#">小米路由器官翻版</a>
                  <a href="#">></a>
                  <hr class="line">
              </div>
              <div  class="menus">
                  <a href="#">米粉红包</a>
                  <a href="#">></a>
                  <hr class="line">
              </div>
           </div>
           <div class="pay">
               <p>话费充值</p>
               <input type="text" placeholder="请输入手机号">
               <select >
                   <option value="100">100元</option>
                   <option value="50">50元</option>
                   <option value="30">30元</option>
               </select>
               <p>实付价格98.4元起</p>
               <button>立即充值</button>
           </div>
       </div>
    </div>
    <div class="foot">
       <div class="foot-top">
           <div class="top1">
                <img src="images/10.png" alt="">
                <p>1小时快修服务</p>
           </div>
           <div class="top2">
                <img src="images/11.png" alt="">
                <p>七天无理由退货</p>  
           </div>
           <div class="top3">
                <img src="images/12.png" alt="">
                <p>十五天免费换货</p>
           </div>
           <div class="top4">
                <img src="images/13.png" alt="">
                <p>1小时快修服务</p>
           </div>
           <div class="top5">
                <img src="images/14.png" alt="">
                <p>520余家售后网点</p>
           </div>      
       </div>
       <hr class="line1">
       <div class="foot-center">
           <ul class="main">
               <li>帮助中心</li>
               <li>购物指南</li>
               <li>支付方式</li>
               <li>配送方式</li>
               <hr class="xian2">
           </ul>
           
           <ul class="main">
                <li>服务支持</li>
                <li>售后政策</li>
                <li>自助服务</li>
                <li>相关下载</li>
                <hr class="xian2">
           </ul>
           <ul class="main">
                <li>小米之家</li>
                <li>小米之家</li>
                <li>服务网店</li>
                <li>预约亲临到店服务</li>
                <hr class="xian2">
           </ul>
           <ul class="main">
                <li>关于小米</li>
                <li>了解小米</li>
                <li>加入小米</li>
                <li>联系我们</li>
                <hr class="xian2">
            </ul>
            <ul class="main">
                <li>关注我们</li>
                <li>新浪微博</li>
                <li>小米部落</li>
                <li>官方微信</li>
                <hr class="xian2">
            </ul>
            <ul class="dianhua">
                <li>400-100-5678</li>
                <li>周一至周日8:00-18:00</li>
                <li>(仅收市话费)</li>
                <button>24小时在线客服</button>
            </ul>

       </div>
       <hr class="line1">
       <div class="foot-bottom">
           <span>小米旗下网站：小米网</span>
           <span>|</span>
           <span>MIUI</span>
           <span>|</span>
           <span>米聊</span>
           <span>|</span>
           <span>多看书城</span>
           <span>|</span>
           <span>小米路由器</span>
           <span>|</span>
           <span>繁体香港</span>
           <span>|</span>
           <span>繁体台湾</span>
           <span>|</span>
           <span>English</span>
           <span>|</span>
           <span>小米后院</span>
           <span>|</span>
           <span>小米天猫店</span>
           <span>|</span>
           <span>小米淘宝直营店</span>
           <span>|</span>
           <span>小米网盟</span>
           <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
       </div>
       <div class="down"> 
           <img src="images/16.png" alt="">
           <div class="yuyan">
              <select>
                 <option value="简体中文">简体中文</option>
                 <option value="繁体中文">繁体中文</option>
                 <option value="English">English</option>
                 <option value="阿拉伯语">阿拉伯语</option>
             </select>
           </div>
       </div>
    </div>
</body>
</html>